<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta charset="UTF-8">
    <title>自定义图片文件上传</title>
  <link href="../dist/css/zx-editor.css" rel="stylesheet">
</head>
<body>
<div id="editorContainer"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.42/polyfill.min.js"></script>
<!--exif获取照片参数插件-->
<script src="./libs/exif.min.js"></script>
<!--debug-->
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script src="../dist/js/zx-editor.js"></script>
<script>
  // 实例化 ZxEditor
  var zxEditor = new ZxEditor('#editorContainer', {
    editable: true,
    // placeholder: '自定义placeholder',
    // lineHeight: 1,
    // padding: '0 0 30px',
    // placeholderColor: 'red',
    cursorColor: 'red',
    // 禁用图片自动处理
    customPictureHandler: true
  })

  console.log(zxEditor)

  zxEditor.on('selectPictureInputChange', function (file, ze, e) {
    //console.log(file, ze, e)
    uploadFile(file).then(function (url) {
      var img = new Image()
      img.src = url
      zxEditor.insertElm(img)
    })
  })

  function uploadFile(file) {
    return new Promise(function (resolve, reject) {
      // 模拟图片上传
      console.log(file)
      setTimeout(function () {
        // 上传成功后的url地址
        var url = '//tuchong.pstatp.com/1000000/f/616286279.jpg'
        resolve(url)
      }, 300)
    })
  }
</script>
</body>
</html>
